<script setup>
import { computed, ref } from 'vue'

const serverURL = computed(() => {
  const streamURL = 'http://192.168.1.193'
  console.log(streamURL)

  return streamURL
})
const pslayer = ref(null)
const currSpot = ref('start')
const spotList = ref([
  { name: '初始点', value: 'start', hotkey: 'I' },
  { name: '大堂  ', value: 'Hall', hotkey: 'H' },
  { name: '篮球场', value: 'basketball', hotkey: 'B' },
  { name: '足球场', value: 'football', hotkey: 'F' },
  { name: '羽毛球馆', value: 'badmiton', hotkey: '' },
  { name: '乒乓球馆', value: 'pingpong', hotkey: '' },
  { name: '游泳馆', value: 'swimming', hotkey: '' },
  { name: '舞蹈室', value: 'dancing', hotkey: '' },
  { name: '网球场', value: 'tennis', hotkey: '' }
])

const setViewSpot = (name) => {
  const command = ` setViewSpot ${name}`
  pslayer.value.emitMessageToUE(command)
}
</script>

<template>
  <pixel-stream-layer ref="pslayer" :server-url="serverURL" is-debug />

  <div class="test">
    <span>港科大体育馆操作 </span>
    <select v-model="currSpot" @change="setViewSpot(currSpot)">
      <option v-for="(item, index) in spotList" :key="index" :value="item.value">
        {{ item.name }}{{ item.hotkey ? '(' + item.hotkey + ')' : '' }}
      </option>
    </select>
    <button @click="resizeView">调整画面满屏</button>
    <button @click="startWander">开始自动巡航</button>
    <button @click="endWander">停止自动巡航</button>
    <button @click="play">播放</button>
    <button @click="close">停止</button>
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
